<template>
    <div class="goods">
      <div class="menu-wrapper">
        <ul>
          <li v-for="(item, index) of goods" :key="index" class="li-item border-bottom">
            <span class="text">
              <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
          </span>
          </li>
        </ul>
      </div>
      <div class="foods-wrapper"></div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Goods',
  props: {
    seller: Object
  },
  data () {
    return {
      goods: []
    }
  },
  methods: {
    getGoodsInfo () {
      axios.get('./api/data.json')
        .then(this.handleGetGoodsInfo)
    },
    handleGetGoodsInfo (res) {
      if (res.data) {
        this.goods = res.data.goods
      }
    }
  },
  mounted () {
    this.getGoodsInfo()
  },
  created () {
    this.classMap = ['decrease', 'discount', 'guarantee', 'invoice', 'special']
  }
}
</script>

<style lang="stylus" scoped>
@import "../../assets/stylus/mixin.styl"
  .goods
    display flex
    position absolute
    top 174px
    width 100%
    bottom 46px
    overflow hidden
    .menu-wrapper
      width 80px
      background #f3f5f7
      .li-item
        height 54px
        width 56px
        text-align left
        padding 0 12px
        display table
        &.border-bottom
          color #000
        .text
          vertical-align middle
          display table-cell
          font-size 12px
          color rgb(20,20,20)
        .icon
          display inline-block
          width 12px
          height 12px
          background-size 12px 12px
          background-repeat no-repeat
          margin-top 4px
          margin-right 4px
          &.decrease
            bg-image(decrease_3)
          &.discount
            bg-image(discount_3)
          &.guarantee
            bg-image(guarantee_3)
          &.invoice
            bg-image(invoice_3)
          &.special
            bg-image(special_3)
    .foods-wrapper
      flex 1
</style>
